
import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';
import Icon from 'components/icon';

const align = [
  {type: 'icon-text-align-left'},
  {type: 'icon-text-align-center'},
  {type: 'icon-text-align-right'},
];
const line = [
  {type: 'icon-text-underline'},
  {type: 'icon-text-line-through'}
];
const vertical = [
  {type: 'icon-text-horizontal' },
  {type: 'icon-text-vertical' }
];
export default class TextProps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // isAlign: props.mod.isAlign,
      isAlign: 0,
      isBold: false,
      isItalic: false,
      isLine: null,
      isVertical: 0,
    };
    // console.log('props.mod.isAlign', props.mod.isAlign);
  }

  static propTypes = {
    label: PropTypes.any,
    numValue: PropTypes.number,
    type: PropTypes.string,
  };

  static defaultProps = {
    label: '二级标题',
    numValue: 0,
    type: 'text',
  };

  // 对齐
  renderAlign(item, index) {
    const {isAlign} = this.state;
    const { mod } = this.props;
    // console.log('mod.isAlign', mod.isAlign);

    const props = {
      key: index,
      type: item.type,
      className: isAlign === index ? css.isCheck : css.notCheck,
      onClick: () => {this.align(index)},
    };
    // props.isCheck = mod.isAlign;
    return <Icon {...props}/>;
  }
  align(ind) {
    const { mod } = this.props;

    // mod.update('isAlign', `${ind}` );
    switch (ind) {
      case 0: mod.update('textAlign', 'left' ); break;
      case 1: mod.update('textAlign', 'center' ); break;
      case 2: mod.update('textAlign', 'right' ); break;
    }
    this.setState({
      isAlign: ind,
    });
    // mod.whichAlign(ind);
    // console.log('mod.isAlign', mod.isAlign);
  }

  // 文字加粗
  textStrong() {
    const {mod} = this.props;
    mod.textStrong();
    this.setState({
      isBold: !this.state.isBold,
    });
  }
  // 文字倾斜
  textItalic() {
    const {mod} = this.props;
    mod.textItalic();
    this.setState({
      isItalic: !this.state.isItalic,
    });
  }


  // 文字下划线和中划线
  renderLine(item, index) {
    const { mod } = this.props;
    const {isLine} = this.state;
    const props = {
      type: item.type,
      key: index,
      className: isLine === index && mod.textDecoration !== 'none' ? css.isCheck : css.notCheck,
      onClick: () => {this.line(index)},
    };
    return <Icon {...props}/>;
  }
  line(ind) {
    const {mod} = this.props;
    mod.textUnderline(ind);
    this.setState({
      isLine: ind,
    });
  }


  // 文字排列方式
  renderVertical(item, index) {
    const {isVertical} = this.state;
    const props = {
      type: item.type,
      key: index,
      className: isVertical === index ? css.isCheck : css.notCheck,
      onClick: () => {this.horizontal(index)},
    };
    return <Icon {...props}/>;
  }
  horizontal(ind) {
    const { mod } = this.props;
    switch (ind) {
      case 0: mod.update('vertical', '' ); break;
      case 1: mod.update('vertical', 'vertical-lr' ); break;
    }
    this.setState({
      isVertical: ind,
    });
  }


  render() {
    const { isBold, isItalic } = this.state;
    return (
      <div>
        <div className={css.fontIcon}>
          { align.map( (item, index) => this.renderAlign(item, index)) }
          <Icon type="icon-text-strong" onClick={this.textStrong.bind(this)} className={isBold ? css.isCheck : css.notCheck}/>
          <Icon type="icon-text-italic" onClick={this.textItalic.bind(this)} className={isItalic ? css.isCheck : css.notCheck}/>
          { line.map( (item, index) => this.renderLine(item, index)) }
        </div>
        <div className={css.fontIcon}>
          { vertical.map( (item, index) => this.renderVertical(item, index))}
        </div>
      </div>
    );
  }
}
